<template>
  <div class="search-panel-container">
    <KeyPanel
        :field-map="props.fieldMap"
        :title="props.title"
        :subtitle="props.subtitle"
        @search="$emit('search')"
        ref="keyPanelRef"
    />

    <DataPanel
        :field-map="props.fieldMap"
        :column-widths="props.columnWidths"
        :loading="props.loading"
        :data-source="props.dataSource"
        @handlePreview="$emit('handlePreview')"
        @handleAdd="$emit('handleAdd')"
        ref="dataPanelRef"
    />
  </div>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue';
import DataPanel from "@/components/DataPanel.vue";
import KeyPanel from "@/components/KeyPanel.vue";

// 定义props
interface Props {
  fieldMap: {
    [key: string]: string;
  };
  dataSource: any[]; // 原始数据源
  title?: string;
  subtitle?: string;
  loading:boolean;
  columnWidths?: { // 列宽度配置
    [key: string]: string | number;
  };
}

const props = withDefaults(defineProps<Props>(), {
  title: '筛选',
  subtitle: '根据关键词快速定位需求',
  dataSource: () => []
});

// 引用KeyPanel组件
const keyPanelRef = ref();
const dataPanelRef = ref();

// 暴露方法给父组件
defineExpose({
  formData: computed(() => keyPanelRef.value?.formData),
  pagination: computed(() => dataPanelRef.value?.pagination),
  selectedRowKey: computed(() => dataPanelRef.value?.selectedRowKey),
  selectedRow: computed(() => dataPanelRef.value?.selectedRow)
});
</script>

<style scoped>
.search-panel-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
</style>